import React, {Component} from "react";
// https://segmentfault.com/a/1190000016281174
// child 给

class Child extends Component
{
    render() {
        return (
          <div>
              child component {this.props.parentName}
          </div>
        );
    }
}

class GrandSon extends Component
{
    state = {
        last_name: 'grand son',
        surname: 'surname son'
    }
    render() {
        return (
            <div>
                {this.state.last_name}
                {this.props.surname}
            </div>
        )
    }
}

class ChildChangeParent extends Component
{
    update() {
        this.props.onChange('name is changed')
    }
    render() {
        return (
            <div>
                {this.props.parentName}
                <button onClick={this.update.bind(this)}>Update data</button>
            </div>
        )
    }
}

class Parent extends Component
{
    state = {
        name: 'xiao ming',
        surname: 'sur name'
    };

    changeName(name) {
        this.setState({
            name
        })
    }

    render() {
        // 5s 之后更新 state name 但是绝对不要再render 中更改 state 数值
        setTimeout(() => this.setState({name: 'fils de xiao ming'}), 5000)
        return (
            <div>
                hello
               <Child parentName={this.state.name}>
               </Child>
                <GrandSon surname={this.state.surname}>
                </GrandSon>
                <ChildChangeParent onChange={this.changeName.bind(this)}
                parentName={this.state.name}>

                </ChildChangeParent>
            </div>

        );
    }
}

export default Parent;
